<template>
  <div class="posttable">
    <el-row style="  margin-bottom: 10px;">
      <el-col :span="24" style="padding-right: 30px;padding-left: 40px;">
        <el-row>
          <el-col class="bot">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">需求名称</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.name}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">需求状态</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.status}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">客户简称</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.customerName}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">工作地点</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.addr}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">所属区域</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.area}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">职位名称</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.postName}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">职位级别</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.postLevel}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">职位类型</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.postType}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">需求人数</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.number}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">困难程度</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">
                  <span v-if="requiredata.nextStar == 3" style="color:#FF1C1D;">困难</span>
                  <span v-if="requiredata.nextStar == 2" style="color:#2931FE;">普通</span>
                  <span v-if="requiredata.nextStar == 1" style="color:#FFC027;">简单</span>
                  <span v-if="requiredata.nextStar == 0" style="color:#04344a;">空</span>
                </p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">薪资上限</p>
              </el-col>
              <el-col>
                <p
                  class="text"
                  v-if="requiredata"
                >{{requiredata.salaryCap + "k" + " " + "*" + " " + requiredata.salaryNum}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">技术面试</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.techInterview}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">作息时间</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.timeTable}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">关键词</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.ordinaryKeywords}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">需求编号</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.no}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">发布时间</p>
              </el-col>
              <el-col>
                <p
                  class="text"
                  v-if="requiredata"
                >{{requiredata.putTime | converTime('YYYY/MM/DD')}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">截止时间</p>
              </el-col>
              <el-col>
                <p
                  class="text"
                  v-if="requiredata"
                >{{requiredata.endTime | converTime('YYYY/MM/DD')}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">期望到岗</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.expectTime}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">组别</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata" style="color:#5ba6fe;">{{requiredata.nextHr}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">面试流程</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.interviewProcess}}</p>
              </el-col>
            </el-col>
          </el-col>
          <el-col class="bot1">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">工作年限</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.workSeniority}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row class="bot1">
          <el-col style="width: 20%;">
            <el-col>
              <p class="title">面试联系人</p>
            </el-col>
            <el-col>
              <p class="text">{{requiredata.interviewContacts}}</p>
            </el-col>
          </el-col>
          <el-col style="width: 20%;">
            <el-col>
              <p class="title">面试地点</p>
            </el-col>
            <el-col>
              <p class="text">{{requiredata.interviewPlace}}</p>
            </el-col>
          </el-col>
          <el-col style="width: 20%;">
            <el-col>
              <p class="title">联系方式</p>
            </el-col>
            <el-col>
              <p class="text">{{requiredata. contactInfo}}</p>
            </el-col>
          </el-col>
          <el-col style="width: 20%;">
            <el-col>
              <p class="title">合同签订日期</p>
            </el-col>
            <el-col>
              <p class="text">{{requiredata.contractSigningDate}}</p>
            </el-col>
          </el-col>
          <el-col style="width: 20%;">
            <el-col>
              <p class="title">项目时长</p>
            </el-col>
            <el-col>
              <p class="text">{{requiredata. projectDuration}}</p>
            </el-col>
          </el-col>
        </el-row>
        <el-row class="bot1">
          <el-col style="width: 20%;">
            <el-col>
              <p class="title">技术电面</p>
            </el-col>
            <el-col>
              <p class="text">
                <span v-if="requiredata.isDm == 'Y'">需要</span>
                <span v-if="requiredata.isDm == 'N'">不需要</span>
              </p>
            </el-col>
          </el-col>
          <el-col style="width: 20%;">
            <el-col>
              <p class="title">电面方向</p>
            </el-col>
            <el-col>
              <p class="text">{{requiredata.direction}}</p>
            </el-col>
          </el-col>
          <el-col style="width: 20%;">
            <el-col>
              <p class="title">电面人员</p>
            </el-col>
            <el-col>
              <p class="text">{{requiredata. charge}}</p>
            </el-col>
          </el-col>
        </el-row>
        <el-row class="bot1">
          <el-col v-for="(item,index) in requiredata.liaisonList" :key="index">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">收件人邮箱</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.liaisonList">{{item.receiverMail}}</p>
              </el-col>
            </el-col>
            <el-col
              style="width: 20%;"
              v-for="(item1,index1) in item.cpSendMails"
              :key="index1"
              :style="{'margin-top': (index1 <= 3 ? '0px':'30px')}"
            >
              <el-col>
                <p class="title">抄送人邮箱</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.liaisonList">{{item1.mail}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row class="bot">
          <el-col :span="12">
            <el-col>
              <p class="title">职位注意点</p>
            </el-col>
            <el-col>
              <div>
                <p class="text" v-for="(item,index) in requiredata.point" :key="index">{{item}}</p>
              </div>
            </el-col>
          </el-col>
        </el-row>
        <el-row class="bot">
          <el-col :span="12">
            <el-col>
              <p class="title">职位职责</p>
            </el-col>
            <el-col>
              <div v-if="requiredata">
                <p class="text" v-for="item in requiredata.duty" :key="item">{{item}}</p>
              </div>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col>
              <p class="title">任职要求</p>
            </el-col>
            <el-col>
              <div v-if="requiredata">
                <p class="text" v-for="item in requiredata.require" :key="item">{{item}}</p>
              </div>
            </el-col>
          </el-col>
        </el-row>
        <el-row class="bot">
          <el-col :span="12">
            <el-col>
              <p class="title">备注</p>
            </el-col>
            <el-col>
              <p class="text">{{requiredata. positionRemarks}}</p>
            </el-col>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";

export default {
  name: "positiondetail",
  props: {
    detailData: {}
  },
  data() {
    return {
      title: "",
      requiredata: {}
    };
  },
  created() {
    axios
      .post(
        this.url + "/demand/getJobDetail",
        qs.stringify({
          //职位需求明细请求
          id: this.detailData.id
        })
      )
      .then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.requiredata = res.data.data;
          if (res.data.data.point !== null) {
            this.requiredata.point = this.requiredata.point.split(/\n/);
          }
          this.requiredata.duty = this.requiredata.duty.split(/\n/);
          this.requiredata.require = this.requiredata.require.split(/\n/);
        }
      });
  },
  mounted() {
    this.title = this.detailData.custname;
  }
};
</script>
<style scoped>
.title {
  color: #757575;
  margin-bottom: 10px;
  font-size: 14px;
}

.text {
  width: 98%;
  color: #333333;
  font-weight: 700;
  font-size: 14px;
  word-break: break-all;
}

.bot {
  margin-bottom: 20px;
}
.bot1 {
  margin-bottom: 30px;
}

</style>
